<template>
	<view class="template-course tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<view class="tn-navbg">
			<view class="tn-flex tn-flex-wrap tn-flex-row-center tn-main-gradient-indigo">
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-white tn-color-indigo">
				      <view class="tn-icon-message-fill"></view>
				    </view>  
				    <view class="tn-text-center tn-color-black">
				      <text class="tn-text-ellipsis">待我审批</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-white tn-color-indigo">
				      <view class="tn-icon-flag-fill"></view>
				    </view>  
				    <view class="tn-text-center tn-color-black">
				      <text class="tn-text-ellipsis">通知我的</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-white tn-color-indigo">
				      <view class="tn-icon-seal"></view>
				    </view>  
				    <view class="tn-text-center tn-color-black">
				      <text class="tn-text-ellipsis">我提交的</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-white tn-color-indigo">
				      <view class="tn-icon-notice-fill"></view>
				    </view>  
				    <view class="tn-text-center tn-color-black">
				      <text class="tn-text-ellipsis">待我确认</text>
				    </view>
				  </view>
				</view>
			</view>
		</view>
		
		<view class="tn-padding-top-xs tn-content">
			<view class="tn-flex tn-flex-row-between tn-margin-sm tn-padding-top">
			  <view class="justify-content-item tn-text-bold tn-text-lg">
			    <text class="tn-icon-title "></text>
			    <text class="">教育专栏</text>
			  </view>
			</view> 
			<view class="tn-flex tn-flex-wrap tn-margin tn-flex-row-left tn-bg-white course-shadow course-radius">
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
				      <view class="tn-icon-calendar"></view>
				    </view>  
				    <view class="tn-text-center">
				      <text class="tn-text-ellipsis">课程安排</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
				      <view class="tn-icon-calendar"></view>
				    </view>  
				    <view class="tn-text-center">
				      <text class="tn-text-ellipsis">课程安排</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
				      <view class="tn-icon-calendar"></view>
				    </view>  
				    <view class="tn-text-center">
				      <text class="tn-text-ellipsis">课程安排</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
				      <view class="tn-icon-calendar"></view>
				    </view>  
				    <view class="tn-text-center">
				      <text class="tn-text-ellipsis">课程安排</text>
				    </view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
				      <view class="tn-icon-calendar"></view>
				    </view>  
				    <view class="tn-text-center">
				      <text class="tn-text-ellipsis">课程安排</text>
				    </view>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import header_mixin from '@/mixin/header_mixin.js'
	export default {
		name: "homePage",
		mixins: [header_mixin],
	}
</script>

<style lang="scss" scoped>
  @import '@/static/css/custom_nav_bar.scss';

  .tn-navbg {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
  } 
  .tn-content {
	  margin-top: 200rpx;
  }
  .course-shadow{
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .course-radius{
    border-radius: 15rpx;
  }
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 50%;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
